<template>
  <div class="article-bg">
    <div class="main">

      <div class="white">
        <div class="head">
          <h3>{{ detailConfig.articleTitle }}</h3>
          <p>
            <span class="mr8">{{ parseTime(detailConfig.publishTime) }}</span> {{ detailConfig.publishUnit }}
          </p>
        </div>
        <div class="article-body">
          <div class="article-text mb100" v-html="detailConfig.articleContent"></div>


          <div class="annex" v-if="detailConfig.fileItems.length">
            <span>附件：</span>
            <ul class="annexList">
              <li class="annexItem" v-for="item in detailConfig.fileItems">
                <a :href="api+'/a/file/dl/'+item.fileId">
                  <span>
                    <span> {{ item.fileName }} </span> {{ item.fileSize }}
                  </span>
                  <i><VerticalAlignBottomOutlined /> 下载文件 </i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script lang="ts" >
import {defineComponent, onMounted, reactive, toRefs, unref} from "vue";
import { Input } from "ant-design-vue";
import { VerticalAlignBottomOutlined } from "@ant-design/icons-vue";
import { useRoute } from "vue-router";
import { parseTime , restoreContentFcImgUrl  , api} from '/@/utils';
import { getArticleDetailApi , getListFileItemsApi } from '/@/api/theme';

export default defineComponent({
  name: "articleDetail",
  components: {
    Input,
    VerticalAlignBottomOutlined
  },
  setup() {
    const { query } = toRefs(useRoute());
    const articleId = (unref(query).id as string) || "";
    const detailConfig = reactive({
      publishUnit: '',
      publishTime: '',
      articleTitle: '',
      articleContent: '',
      fileItems:[]
    })

    const init = async() => {
     const data = await getArticleDetailApi(articleId);
     let { publishUnit , publishTime , articleTitle ,articleContent}  = toRefs(detailConfig)
     publishUnit.value = data.publishUnit;
     publishTime.value = data.publishTime;
     articleTitle.value = data.articleTitle;
     articleContent.value = restoreContentFcImgUrl(data.articleContent);

     if(data.fileId){
       const result = await getListFileItemsApi({fileRelOrFileId:data.fileId});
       detailConfig.fileItems = result.data;
     }
    }
    onMounted(init);

    return {
      api,
      detailConfig,
      parseTime
    };
  },
});
</script>

<style lang="less" scoped>
.article-bg {
  background: #f4f6fa;
}

.simple-head {
  position: relative;
  top: 0;
  left: 0;
  z-index: 9999999;
  height: 80px;
  background: white;
}

.article-banner {
  height: 160px;
  background: linear-gradient(90deg, #5275f6 0%, #1da2fa 100%);
}

.article-b_left {
  display: flex;
  justify-content: left;
  align-content: center;
  align-items: center;
}

.p10 {
  padding: 10px 0;
}

.white {
  padding: 20px 50px;
  margin-bottom: 60px;
  background: white;
}

.head {
  padding-top: 20px;
  text-align: center;
  border-bottom: 1px solid #eaedf3;

  h3 {
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: normal;
    text-align: center;
  }

  p {
    color: #666;
  }
}

.article-body {
  padding: 30px 0 80px;
  line-height: 2;
}

.annex {
  position: relative;
  padding-left: 50px;

  > span {
    position: absolute;
    top: 5px;
    left: 0;
    font-size: 16px;
    line-height: 1.4;
  }
}

.annexItem {
  position: relative;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 6px;

  a{
    display: block;

    >span {
      display: inline-block;
      width: calc(100% - 120px);
      overflow: hidden;
      font-size: 16px;
      font-weight: 400;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: top;

      >span{
        color: #2d8cf0;
        text-decoration: underline;
      }
    }

    i {
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      color: #2d8cf0;
    }
  }


}
</style>


